<template>
  <view class="container">
    <!-- 小程序头部兼容 -->
    <!-- #ifdef MP -->
    <!--		<view class="mp-search-box">-->
    <!--			<input class="ser-input" type="text" value="输入关键字搜索" disabled />-->
    <!--		</view>-->
    <!-- #endif -->
    <!-- 最新消息 -->

    <view class="frame-oKD-2  pointer-link">
      <view class="frame-hbC-1">
        <view class="text-FnT-1">
          <view class="p-text-FnT-1">
            <text class="span-sHQ-1 ">最新</text>
          </view>
        </view>
        <view class="text-GgL-2">
          <view class="p-text-GgL-2">
            <text class="span-HcM-1 ">消息</text>
          </view>
        </view>
      </view>
      <view class="img-aMy-2"></view>
      <view class="frame-iFg-3">
        <view class="text-jxc-1">
          <view class="p-text-jxc-1">
            <text class="span-ZXr-1">2023-12-25 您有一条新的数据已审核完毕...</text>
          </view>
        </view>
      </view>
    </view>
    <view class="frame-oKD-3">
      <image
        src="/static/index/scan.png"
        style="width:20px; height:20px;"
        mode="scaleToFill"
      />
    </view>

    <!-- 头部轮播 -->
    <view class="carousel-section">
      <!-- 标题栏和状态栏占位符 -->
      <view class="titleNview-placing"></view>
      <!-- 背景色区域 -->
      <view class="titleNview-background"></view>
      <swiper class="carousel" circular @change="swiperChange">
        <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
                     @click="navToDetailPage({title: '轮播广告'})">
          <image :src="item.home"/>
        </swiper-item>
      </swiper>
      <!-- 自定义swiper指示器 -->
      <view class="swiper-dots">
        <text class="num">{{ swiperCurrent + 1 }}</text>
        <text class="sign">/</text>
        <text class="num">{{ swiperLength }}</text>
      </view>
    </view>

    <!-- 数据存储空间 -->
    <view class="progress-box">
      <u-line-progress :percentage="(spaceData.usedSpace / spaceData.space) * 100" :showText="false" active-color="#fdf265"></u-line-progress>
      <text class="progress-box-text">重要数据存储空间：{{spaceData.usedSpace||0}}GB / {{spaceData.space||0}}GB</text>
    </view>

    <!-- 分类 -->
    <view class="cate-section">
      <view class="cate-item" @click="navTo(item.url)" v-for="(item,index) in navList" :key="index">
        <image :src="item.image"></image>
        <text>{{ item.text }}</text>
      </view>
    </view>

    <!-- <view class="content">
      <base-tab :tabIndex="tabIndex" :tabList="tabList" @changeTab="changeTab"></base-tab>
      <h3 class="title">
				<view class="title-bar">

					<view v-for="(item, index) in titleList" :key="index" class="title-item"
								:class="{current: titleCurrentIndex === index}" @click="titleClick(index)">
						{{ item.text }}
					</view>
        <text @click="navToDataPage">更多>></text>

				</view>

      </h3>
      <view class="data-list">
        <view class="data-item" v-for="(item, index) in productList" :key="index"
              @click="navToDetailPage(item)">
          <template v-if="index <3">
            <image :src="item.iconUrl || iconUrl"></image>
            <view class="data-info">
              <text class="data-title">{{ item.name || "未命名" }}</text>
              <text class="data-datetime">{{ item.updateTime }}
              </text>
              <text class="data-detail">查看详情 >
              </text>
            </view>
          </template>

        </view>
      </view>
    </view> -->
    <view class="content">
      <!-- <base-tab :tabIndex="tabIndex" :tabList="tabList" @changeTab="changeTab"></base-tab> -->
      <h3 class="title">我的资产
        <text style="margin-top:14px;" @click="navTo('/pages/product/list')">更多>></text>
      </h3>
      <view class="data-list">
        <view class="data-item" v-for="(item, index) in myProductList" :key="index"
              @click="navToDetailPage(item)">
          <template v-if="index <3">
            <image :src="item.iconUrl || iconUrl"></image>
            <view class="data-info">
              <text class="data-title">{{ item.name || "未命名" }}</text>
              <text class="data-datetime">{{ item.updateTime }}
              </text>
              <text class="data-detail">查看详情 >
              </text>
            </view>
          </template>

        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {
  getPicture,
  getPublicProduct
} from "../../api/public";
import BaseTab from "@/components/common/base-tab.vue";
//import {getUserInfo} from '@/api/user.js';
import {getProductionList} from "@/api/product.js";
import { mapState, mapActions } from 'vuex';
import {getToken} from "@/util/auth";
import {authentication} from "@/api/right";


export default {
  components: {
    BaseTab
  },
  computed: {
    ...mapState(['userInfo']) // 映射 userInfo 到当前组件的 computed 属性中
  },

  data() {
    return {
      titleNViewBackground: '',
      swiperCurrent: 0,
      swiperLength: 3,
      iconUrl: '/static/index/img.png',
      isData: false,
      carouselList: [],
      myProductList: [],
      titleCurrentIndex: 0,
			titleList:[
				{text:'推荐数据'},
				{text:'热门数据'}
			],
      productList: [{
        id: 0,
        iconUrl: "/static/index/img.png",
        productName: "知识产权布局与战略规划书",
        updateTime: "2021/8/22 16:18"
      },
        {
          id: 1,
          iconUrl: "/static/index/img.png",
          productName: "知识产权布局与战略规划书",
          updateTime: "2021/8/22 16:18"
        },
        {
          id: 2,
          iconUrl: "/static/index/img.png",
          productName: "知识产权布局与战略规划书",
          updateTime: "2021/8/22 16:18"
        },
      ],
      tabIndex: 0,
      tabList: [{
        label: '推荐数据'
      },
        {
          label: '热门数据'
        },
      ],

      navList: [{
        text: '我的资产',
        image: "/static/index/asset.png",
        url: `/pages/asset/digitalAssets`
      },
        {
          text: '我的申请',
          image: "/static/index/buy.png",
          url: `/pages/order/order`
        },
        {
          text: '门户新闻',
          image: "/static/index/news.png",
          url: ""
        },
        {
          text: '数权账户',
          image: "/static/index/wallet.png",
          url: `/pages/equity/equity`
        },
        {
          text: '申请审核',
          image: "/static/index/orderReview.png",
          url: `/pages/order/checkedOrder`
        },
        {
          text: '使用帮助',
          image: "/static/index/usingHelp.png",
          url: ""
        },
        {
          text: '消息中心',
          image: "/static/index/message.png",
          url: "/pages/contacts/messageCenter"
        },
        {
          text: '更多',
          image: "/static/index/more.png",
          url: ""
        }
      ]

    };
  },

  onLoad() {
    this.checkUserInfo();
  },
  methods: {
		titleClick(index) {
		this.titleCurrentIndex = index;
		console.log("index" + this.titleCurrentIndex);
	},
    ...mapActions(['updateUserInfo']), // 映射 updateUserInfo 到当前组件的 methods 中

	async checkUserInfo() {
      const token = getToken();
      if (!token) {
        uni.navigateTo({
          url: '/pages/public/login'
        });
      } else {
        // 如果用户已登录，则更新用户信息并加载数据
       // const userInfo = await getUserInfo(); // 假设此方法可以获取用户信息
		const userInfo = this.userInfo||{};
        if (userInfo) {
          this.updateUserInfo(userInfo);
          this.loadData(); // 在用户登录后加载数据
        }
      }
    },

    async loadData() {
      //公共产品
      let productList = await getPublicProduct({pageSize: 3, pageNum: 1});
      this.productList = productList.rows;
      // 我的资产
      getProductionList({pageSize: 3, pageNum: 1}).then(res => {
        if (res.code === 200) {
			console.log('list', res)
          this.myProductList = res.rows;
        }
      })

      if (this.isData) {
        // 轮播图
        let carouselList = await getPicture();
        console.log('carouselList', carouselList)
        this.titleNViewBackground = carouselList.rows[0].background;
        this.swiperLength = carouselList.rows.length;
        this.carouselList = carouselList.rows;
      } else {
        let carouselList = await this.$api.json('carouselList')
		console.log('carouselList1111', carouselList)
        this.titleNViewBackground = carouselList[0].background;
        this.swiperLength = carouselList.length;
        this.carouselList = carouselList;
      }

      let goodsList = await this.$api.json('goodsList');
      this.goodsList = goodsList || [];
    },
    //轮播图切换修改背景色
    swiperChange(e) {
      const index = e.detail.current;
      this.swiperCurrent = index;
      this.titleNViewBackground = this.carouselList[index].background;
    },
    //详情页
    navToDetailPage(item) {
      let id = item.id;
      uni.navigateTo({
        url: `/pages/product/product?id=${id}`
      })
    },

    //前往所有数据页
    navToDataPage() {
      console.log('点击',)
      // uni.switchTab({
      //   url: '/pages/data/data'
      // });
      uni.navigateTo({
        url: `/pages/data/data`
      })
    },
    //前往我的资产
    natoDigitalAssets() {
      uni.navigateTo({
        url: `/pages/asset/digitalAssets`
      })
    },
    //前往我的购买
    natoMyOrder() {
      uni.navigateTo({
        url: `/pages/order/order`
      })
    },
    changeTab(index) {
      this.tabIndex = index;
    },
    navTo(url) {
      console.log(url)
      if (url) {
        if(url == '/pages/product/list'){
          uni.switchTab({url})
        }
        uni.navigateTo({
          url
        })
      } else {
        this.$api.msg('拼命开发中...');
      }

    },
  },
  // #ifndef MP
  // 标题栏input搜索框点击
  onNavigationBarSearchInputClicked: async function (e) {
    this.$api.msg('点击了搜索框');
  },
  //点击导航栏 buttons 时触发
  onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
      this.$api.msg('点击了扫描');
    } else if (index === 1) {
      // #ifdef APP-PLUS
      const pages = getCurrentPages();
      const page = pages[pages.length - 1];
      const currentWebview = page.$getAppWebview();
      currentWebview.hideTitleNViewButtonRedDot({
        index
      });
      // #endif
      uni.navigateTo({
        url: '/pages/notice/notice'
      })
    }
  },

  // #endif
}
</script>

<style lang="scss" scoped>
/* #ifdef MP */
.mp-search-box {
  position: absolute;
  left: 0;
  top: 30upx;
  z-index: 9999;
  width: 100%;
  padding: 0 80upx;

  .ser-input {
    flex: 1;
    height: 56upx;
    line-height: 56upx;
    text-align: center;
    font-size: 28upx;
    color: $font-color-base;
    border-radius: 20px;
    background: rgba(255, 255, 255, .6);
  }
}
.progress-box {
  background: linear-gradient(to right, #b64cf8, #6a33c8);
  border-radius: 25upx;
  margin: 25upx 0 ;
  padding: 40upx;
  .progress-box-text {
    color: #b4b4b4;
  }
}

.container {
  display: relative;
  padding: 0 10px;
}

page {
  .cate-section {
    position: relative;
    z-index: 5;
    //border-radius: 16upx 16upx 0 0;
    //margin-top: -20upx;
  }

  .carousel-section {
    padding: 0;
    margin-top: 15px;

    .titleNview-placing {
      padding-top: 0;
      height: 0;
    }

    .carousel {
      .carousel-item {
        padding: 0;
      }
    }

    .swiper-dots {
      left: 45upx;
      bottom: 40upx;
    }
  }
}

/* #endif */
@import '../../style/uni.css';

page {
  background: #0a0a22;
}

.m-t {
  margin-top: 16upx;
}

/* 头部 轮播图 */
.carousel-section {
  position: relative;
  padding-top: 10px;
  background: #0a0a22;

  .titleNview-placing {
    height: var(--status-bar-height);
    padding-top: 44px;
    box-sizing: content-box;
  }

  .titleNview-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 426upx;
    transition: .4s;
  }
}

.carousel {
  width: 100%;
  height: 350upx;

  .carousel-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
  }

  image {
    width: 100%;
    height: 100%;
    border-radius: 10upx;
  }
}

.swiper-dots {
  display: flex;
  position: absolute;
  left: 60upx;
  bottom: 15upx;
  width: 72upx;
  height: 36upx;
  background-image: url();
  background-size: 100% 100%;

  .num {
    width: 36upx;
    height: 36upx;
    border-radius: 50px;
    font-size: 24upx;
    color: #fff;
    text-align: center;
    line-height: 36upx;
  }

  .sign {
    position: absolute;
    top: 0;
    left: 50%;
    line-height: 36upx;
    font-size: 12upx;
    color: #fff;
    transform: translateX(-50%);
  }
}

/* 分类 */
.cate-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 20upx 0;
  //background: #fff;
  background: #0a0a22;

  .cate-item {
    padding-bottom: 20upx;
    width: 160upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: $font-sm + 2upx;
    color: $font-color-light;
  }

  /* 原图标颜色太深,不想改图了,所以加了透明度 */
  image {
    width: 88upx;
    height: 88upx;
    margin-bottom: 14upx;
    border-radius: 50%;
    //opacity: .7;
    //box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
  }
}

//数据列表

.content {
  .title {
    color: $font-color-light;
    font-weight: 500;
    margin-bottom: 15px;
		margin-top: 25px;
    text {
      float: right;
      font-size: 12px;
			line-height: 12px;
			margin-top:30px;
    }
		.title-bar {
			display: flex;
			height: 40px;
			// padding: 0 5px;
			position: relative;
			.title-item {
				flex: 1;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100%;
				color: darkgray;
				position: relative;

				&.current {
					color: white;

					&:after {
						content: '';
						position: absolute;
						left: 30px;
						bottom: -2px;
						transform: translateX(-50%);
						width: 50upx;
						height: 60upx;
						border-radius: 100%;
						border-bottom: 3px solid #00aaff;
					}
				}
			}
		}
  }

  .data-list {
    display: flex;
    flex-wrap: wrap;
    //padding: 0 20upx;
    gap: 12rpx;

    .data-item {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      border-radius: 6px;
      gap: 12px;
      background: rgba(47, 48, 69, 1);

      //padding: 20px 0 20px 0;
      //border-bottom: 1upx solid #f0f0f0;
      image {
        width: 240rpx;
        height: 240rpx;
        border-radius: 6px;
      }

      .data-info {
        //flex: 1;
        height: 200rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 6px;

        .data-title {
          padding-top: 16px;
          font-size: $font-lg + 2upx;
          color: $font-color-light;
          font-weight: 500;
          margin-bottom: 10upx;
        }

        .data-datetime {
          font-size: $font-sm + 2upx;
          color: $font-color-base;
          margin-bottom: 10upx;
        }

        .data-detail {
          padding-top: 10px;
          padding-bottom: 16px;
          font-size: $font-sm + 2upx;
          color: $font-color-base;
        }
      }
    }
  }
}

.span-sHQ-1 {
  text-decoration-line: none;
}

.p-text-FnT-1 {
  display: inline;
  margin: 2px;
  width: 100%;
  text-align: left;
}

.text-FnT-1 {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 0;
  justify-content: start;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 1px;
  font-size: 10px;
  line-height: 10px;
	transform: scale(1.3,1);
  font-weight: 800;
  opacity: 1;
  font-family: 'PangMenZhengDao';
  white-space: nowrap;
  min-height: 14px;
}

.text-FnT-1-br {
  display: block;
  margin-bottom: 0px;
  overflow: hidden;
}

.span-HcM-1 {
  text-decoration-line: none;
  background: linear-gradient(90deg, rgba(24, 219, 195, 1) 0%, rgba(2, 165, 248, 1) 100%);
  -webkit-background-clip: text;
  display: inline-block;
}

.p-text-GgL-2 {
  display: inline;
  margin: 0px;
  width: 100%;
  text-align: left;
}

.text-GgL-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  justify-content: start;
  height: auto;
  mix-blend-mode: normal;
  color: transparent;
  font-size: 10px;
  line-height: 10px;
	transform: scale(1.3,1);
  font-weight: 800;
  opacity: 1;
  font-family: 'PangMenZhengDao';
  letter-spacing: 1px;
  white-space: nowrap;
  min-height: 14px;
}

.text-GgL-2-br {
  display: block;
  margin-bottom: 0px;
  overflow: hidden;
}

.frame-hbC-1 {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  mix-blend-mode: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: auto;
	gap:1px;
}

.frame-hbC-1.fixed-width {
  width: 30px;
}

.img-aMy-2 {
  position: relative;
  z-index: 1;
  border: unset !important;
  box-shadow: unset;
  width: 1px;
  height: 35px;
  mix-blend-mode: normal;
  display: flex;
  background-image: url(https://img.js.design/assets/element/js_L6bRoGUANfE/image/1d0d5bc422014f956ca53f46f1686ddc9e5c9b6e.png);
  background-size: cover;
  flex-shrink: 0;
}

.span-ZXr-1 {
  // text-decoration-line: none;
  white-space: nowrap;
	overflow: hidden;
  text-overflow: ellipsis;
}

.p-text-jxc-1 {
	font-size:13px;
	line-height: 13px;
  margin: 0px;
  width:80%;
	display: flex;
}

.text-jxc-1 {
	width:100%;
  position: relative;
  display: flex;
  // flex-direction: column;
  z-index: 0;
  justify-content: flex-start;
	align-items:center;
  height: auto;
  mix-blend-mode: normal;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: 400;
  opacity: 1;
  font-family: 'SourceHanSansCN-Regular';
  letter-spacing: 0px;
  // white-space: nowrap;
  min-height: 21px;
}

.text-jxc-1-br {
  display: block;
  margin-bottom: 0px;
  overflow: hidden;
}

.frame-iFg-3 {
	width:100%;
  position: relative;
  z-index: 3;
  height: auto;
  mix-blend-mode: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  // gap: 4px;
  flex: 1;
}

.frame-iFg-3.fixed-width {
  width: 249px;
}

.frame-oKD-2 {
  position: relative;
  z-index: 2;
  height: auto;
  border-radius: 8px;
  mix-blend-mode: normal;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 20px 6px 20px;
  background: rgba(59, 60, 81, 1);
  box-sizing: border-box;
  gap: 12px;
  width:80%;
}

.frame-oKD-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:0px;
  right:10px;
  z-index: 2;
  border-radius: 8px;
  mix-blend-mode: normal;
  padding: 6px;
  background: rgba(59, 60, 81, 1);
  box-sizing: border-box;
  width:16%;
  height:46px;
}

.frame-oKD-2.fixed-width {
  width: 343px;
}

::-webkit-scrollbar {
  display: none;
}

.pointer-link, .pointer-link > * {
  cursor: var(--cursor-pointer) !important;
}
</style>
